<template>
  <div
    class="showPanel flex flex-col gap-y-[20px] h-full animate__animated transitionPanel relative animate__fadeInLeft"
  >
    <div class="relative h-full text-[#fff]">
      <div
        class="absolute flex flex-col gap-y-[20px] top-0 left-0 right-0 bottom-0 pt-[50px] pl-[10px] pb-[50px]"
      >
        <!--          园区基本信息-->
        <base-card class="flex-1 overflow-hidden" title="园区基本信息">
          <simple-line>
            <img
              src="@/assets/images/bigscreen/iconmid.png"
              class="w-[16px] h-[16px] mr-[10px]"
            />
            <span class="mr-[20px]">总体规划面积</span>
            <span class="common_blue">16.7km²</span>
          </simple-line>
          <div class="grid grid-cols-2 pl-[5px] items-center flex-1">
            <div v-for="(item, index) in topList">
              <div class="text_blue_point flex items-center">
                <span class="mr-[6px]">
                  {{ item.label }}
                </span>
                <span class="common_blue">
                  {{ item.value }}{{ item.unit }}
                </span>
              </div>
            </div>
          </div>
        </base-card>
        <base-card class="flex-1 overflow-hidden" title="园区经济分析">
          <simple-line>
            <img
              src="@/assets/images/bigscreen/iconmid2.png"
              class="w-[16px] h-[16px] mr-[10px]"
            />
            <span class="mr-[20px]">工业总产值</span>
            <span class="common_blue">16.7亿元</span>
          </simple-line>
          <div
            style="background: rgba(23, 44, 80, 0.4)"
            class="rounded-[4px] grid grid-cols-2 pl-[5px] items-center flex-1"
          >
            <div v-for="(item, index) in topList2" class="flex items-center">
              <img :src="item.img" class="w-[38px] h-[38px]" />
              <div class="ml-[5px]">
                <div>{{ item.label }}</div>
                <div class="flex items-center light_blue_text">
                  {{ item.value }}{{ item.unit }}
                  <!--                  <img src="@/assets/images/bigscreen/" />-->
                  <span class="text-[14px] ml-[10px]">{{ item.value1 }}%</span>
                </div>
              </div>
            </div>
          </div>
        </base-card>
        <!--   园区用工总人数-->
        <base-card class="flex-1 overflow-hidden" title="园区用工总人数">
          <simple-line>
            <img
              src="@/assets/images/bigscreen/iconmid2.png"
              class="w-[16px] h-[16px] mr-[10px]"
            />
            <span class="mr-[20px]">园区用工总人数</span>
            <span class="common_blue">16.7人</span>
          </simple-line>
          <div class="flex-1 overflow-auto">
            <div
              class="flex items-center pl-[15px] mt-[10px]"
              v-for="(item, index) in topList3"
            >
              <div class="text_blue_point">
                <div class="relative w-[80px] ellipsis">
                  {{ item.label }}
                </div>
              </div>
              <a-progress
                :percent="100"
                :stroke-width="15"
                :show-info="false"
                class="w-[70%]"
                :stroke-color="{
                  '0%': '#65A4CC',
                  '100%': '#B1FAD8',
                }"
              />
              <span>{{ item.value }}</span>
            </div>
          </div>
        </base-card>
      </div>
    </div>
  </div>
</template>

<script setup>
import BaseCard from "@/components/three/component/baseCard.vue";
import BaseChart from "@/components/three/component/baseChart/index.jsx";
import { onMounted, ref } from "vue";
import { getChemicalDailyRecords } from "@/api/dataScreen/dataScreen.js";
import { dayjs } from "element-plus";
import { map } from "lodash-es";
import * as echarts from "echarts";
import SimpleLine from "@/components/three/component/simpleLine.vue";
import icon1 from "@/assets/images/bigscreen/icon1.png";
import icon2 from "@/assets/images/bigscreen/icon2.png";
import icon3 from "@/assets/images/bigscreen/icon3.png";
import icon4 from "@/assets/images/bigscreen/icon4.png";
const topList = ref([
  {
    label: "建筑面积",
    value: "32",
    unit: "km²",
  },
  {
    label: "固定资产投资总额",
    value: "39",
    unit: "亿元",
  },
  {
    label: "企业数量",
    value: "32",
    unit: "个",
  },
  {
    label: "基础设施投资",
    value: "32",
    unit: "亿元",
  },
]);
const topList2 = ref([
  {
    label: "年度总产能",
    value: "32",
    value1: "32",
    unit: "亿",
    img: icon1,
  },
  {
    label: "年度总利润",
    value: "39",
    value1: "39",
    unit: "亿",
    img: icon2,
  },
  {
    label: "年度税金",
    value: "32",
    value1: "32",
    unit: "个",
    img: icon3,
  },
  {
    label: "主营业务",
    value: "32",
    value1: "32",
    unit: "亿元",
    img: icon4,
  },
]);
const topList3 = ref([
  {
    label: "内蒙古111111",
    value: "32",
  },
  {
    label: "内蒙古111111",
    value: "39",
  },
  {
    label: "内蒙古111111",
    value: "32",
  },
  {
    label: "内蒙古111111",
    value: "32",
  },
  {
    label: "内蒙古111111",
    value: "32",
  },
  {
    label: "内蒙古111111",
    value: "32",
  },
  {
    label: "内蒙古111111",
    value: "32",
  },
  {
    label: "内蒙古111111",
    value: "32",
  },
]);
const props = defineProps({
  isToLeft: {
    default: true,
    type: Boolean,
  },
});
const payload = {
  id: "",
  data: {
    title: ["生态指数"],
    unit: ["%"],
    x: ["原煤", "重精", "浮精", "外过", "末中"],
    data1: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
  },
};

const x = payload.data.x || [];
//bottom
const getBottomData = () => {
  // 底部echart
  getChemicalDailyRecords({
    date: dayjs(bottomTime.value).format("YYYY-MM-DD"),
  }).then((res) => {
    if (!res.code) {
      // "21:00-22:00"
      let dataTime = `${dayjs().subtract(1, "hour").format("HH:00")}-${dayjs().format("HH:00")}`;
      let edata = [];
      res.data.map((item) => {
        if (item.testTime == dataTime) {
          edata.push(item);
        }
      });
      console.log("getBottomData---", edata);
      if (edata?.length) {
        chartOptions1.value.xAxis.data = map(edata, "sampleName");
        chartOptions1.value.series[0].data = edata.map(
          (it) => it.ashContent || "--",
        );
        chartOptions1.value.series[1].data = edata.map(
          (it) => it.ashContent || "--",
        );
      }
      console.log(chartOptions1.value);
    }
  });
};
const bottomTime = ref(dayjs().subtract(10, "day"));
const chartOptions1 = ref({
  grid: {
    top: 35,
    left: 15,
    right: 15,
    bottom: 10,
    // 是否包含文本
    containLabel: true,
  },
  title: {
    text: "小时灰%",
    textStyle: {
      fontSize: 11,
      color: "#A7BFDE",
    },
  },
  tooltip: {
    trigger: "axis",
    borderWidth: 0,
    confine: false,
    appendToBody: true,
  },
  xAxis: {
    data: x,
    axisLine: {
      lineStyle: {
        type: "solid",
        color: "#4176a3",
        width: "0.5", //坐标线的宽度
      },
    },
    axisLabel: {
      textStyle: {
        color: "#fff", //底部文字颜色
        fontSize: 12,
      },
    },
  },
  yAxis: [
    {
      type: "value",
      axisLine: {
        show: false,
        lineStyle: {
          color: "transparent", //左边框颜色
        },
      },
      splitLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        show: true,
        fontSize: 12,
        textStyle: {
          color: "#ADD6FF", //左文字颜色
        },
      },
    },
  ],
  series: [
    {
      name: "小时灰",
      type: "bar",
      barWidth: 12,
      itemStyle: {
        color: "transparent",
      },
      data: [],
      z: 0,
      zlevel: 0,
    },
    {
      barWidth: 12,
      type: "pictorialBar",
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: "#2C87E9", //渐变1
          },
          {
            offset: 1,
            color: "#39D8FF", //渐变2
          },
        ]),
      },
      symbolRepeat: "true",
      symbolMargin: 2,
      symbol: "rect",
      symbolSize: [12, 4],
      data: [],
      z: 1,
      zlevel: 0,
    },
  ],
});
const chartOptions2 = ref({
  title: { text: "", left: "center" }, // 可调整标题
  series: [
    {
      type: "sankey",
      layout: "none",
      emphasis: { focus: "adjacency" },
      nodeGap: 50,
      nodeAlign: "left",
      data: [
        { name: "原煤", itemStyle: { color: "#55CC66" } },
        { name: "重精", itemStyle: { color: "#55DD66" } },
        { name: "浮精", itemStyle: { color: "#99EE88" } },
        { name: "未中", itemStyle: { color: "#5599DD" } },
        { name: "研石", itemStyle: { color: "#DD7744" } },
      ],
      links: [
        {
          source: "原煤",
          target: "重精",
          value: 25223,
          lineStyle: {
            color: "#38A169",
            opacity: 0.9,
            curveness: 0.6,
            borderJoin: "round",
            borderCap: "round",
          },
        },
        {
          source: "原煤",
          target: "浮精",
          value: 21253,
          lineStyle: {
            color: "#68D391",
            opacity: 0.9,
            curveness: 0.6,
            borderJoin: "round",
            borderCap: "round",
          },
        },
        {
          source: "原煤",
          target: "未中",
          value: 12536,
          lineStyle: {
            color: "#3182CE",
            opacity: 0.9,
            curveness: 0.6,
            borderJoin: "round",
            borderCap: "round",
          },
        },
        {
          source: "原煤",
          target: "研石",
          value: 52364,
          lineStyle: {
            color: "#E76F51",
            opacity: 0.9,
            curveness: 0.8,
            borderJoin: "round",
            borderCap: "round",
          },
        },
      ],
      label: {
        color: "#FFF",
        fontSize: 12,
        position: "right",
        formatter: (obj) => {
          if (obj.name == "原煤") {
            return `${obj.name}`;
          } else {
            return `${obj.name}\n${obj.value}`;
          }
        },
      },
    },
  ],
});
onMounted(() => {
  getData();
});
const getData = () => {};
</script>
<style scoped lang="less"></style>
